<template>
  <div>
    <el-form
      ref="form"
      :inline="true"
      :model="form">
      <el-row>
        <template v-for="item in column">
          <el-col :span="item.span || 4.8" :key="item.prop">
            <el-form-item :label="item.label">
              <form-temp :column="item" :text.sync="form[item.prop]">
              </form-temp>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="4.8">
          <el-form-item label-width="0px">
            <!-- @slot 菜单的操作按钮自定义内容 -->
            <slot name="menu"></slot>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import formTemp from '../../formTemp'

/**
 * 对element-ui表单组件进行二次封装，通过JSON格式的配置实现表单，并使用row/col组件布局。
 */
export default {
  name: "OceForm",
  components: { formTemp },
  props: {
    /**
     * 组件配置属性，详情见下面Option属性
     */
    option: {
      type: Object,
    },
    /**
     * 表单项配置，详情见下面Column属性
     */
    column: {
      type: Array
    }
  },
  data() {
    return {
      form: {},
      formCreate: false
    }
  },
  watch: {
    form: {
      handler (val) {
        if (this.formCreate) this.setVal();
      },
      deep: true
    }
  },
  created () {
    this.$nextTick(() => {
      this.setVal()
      this.formCreate = true
    })
  },
  mounted() {},
  methods: {
    /**
     * 清空表单内容
     * @public
     */
    resetForm() {
      this.form = {}
    },
    setVal () {
      /**
       * v-mode
       * @property {Object}
       */
      this.$emit("input", this.form);
      /**
       * v-mode
       * @property {Object}
       */
      this.$emit("change", this.form);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form{
  padding: 5px;
  .el-form-item{
    width: 100%;

    .el-form-item__label{
      float: left;
      text-align: end;
      padding-right: 10px;
      width: 80px;
    }
    
    .el-form-item__content{
      width: 100% ;
      display: block ;
      padding-left: 80px;
    }

    .el-date-editor{
      width: 100%;
    }
  }
}

</style>
